<template>
  <div>
    <!-- 搜索框区域 -->
    <SearchForm current-label="输入搜索：" current-placeholder="商品名称">
      <template #inputSelect>
        <el-form-item label="商品货号：" prop="username">
          <el-input placeholder="商品货号" />
        </el-form-item>
        <el-form-item label="商品分类：" prop="selectStatus">
          <el-select placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="商品品牌：" prop="selectStatus">
          <el-select placeholder="请选择品牌">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> </el-form-item
        ><el-form-item label="上架状态：" prop="selectStatus">
          <el-select placeholder="全部">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="审核状态：" prop="selectStatus">
          <el-select placeholder="全部">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </template>
    </SearchForm>
    <!-- 添加数据 -->
    <addData>
      <template #btnText>
        <el-button type="primary">添加</el-button>
      </template>
    </addData>
    <!-- 表格区域 -->
    <el-table
      :border="true"
      ref="multipleTableRef"
      :data="tableData"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column align="center" type="selection" width="60" />
      <el-table-column align="center" label="编号" property="id" width="70">
      </el-table-column>
      <el-table-column align="center" label="商品图片" width="120">
        <template #default="scope">
          <img style="height: 80px" :src="scope.row.pic" alt="商品图片" />
        </template> </el-table-column
      >>
      <el-table-column align="center" label="商品名称" width="250">
        <template #default="scope">
          <div>{{ scope.row.name }}</div>
          <div>品牌：{{ scope.row.brandName }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="价格/货号" width="120">
        <template #default="scope">
          <div>价格：￥{{ scope.row.price }}</div>
          <div>货号：{{ scope.row.productSn }}</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标签" width="139">
        <template #default="scope">
          <div>
            上架：<el-switch
              :active-value="1"
              :inactive-value="0"
              type="primary"
              v-model="scope.row.publishStatus"
            ></el-switch>
          </div>
          <div>
            新品：<el-switch
              :active-value="1"
              :inactive-value="0"
              type="primary"
              v-model="scope.row.newStatus"
            ></el-switch>
          </div>
          <div>
            推荐：<el-switch
              :active-value="1"
              :inactive-value="0"
              type="primary"
              v-model="scope.row.recommandStatus"
            ></el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" property="sort" label="排序">
      </el-table-column>
      <el-table-column align="center" label="SKU库存" property="id">
        <template #default="scope">
          <el-button size="large" type="primary" :icon="Edit" circle />
        </template>
      </el-table-column>
      <el-table-column align="center" label="销量" property="sale">
      </el-table-column>
      <el-table-column
        align="center"
        label="审核状态"
        property="id"
        width="120"
      >
        <template #default="scope">
          <div>{{ scope.row.verifyStatus === 1 ? "审核通过" : "未审核" }}</div>
          <div style="cursor: pointer; color: #66b1ff">审核详情</div>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="160">
        <template #default="scope">
          <div style="margin-bottom: 8px">
            <el-button type="primary">编辑</el-button>
          </div>
          <div>
            <el-button type="danger">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 批量操作区域 -->
    <OperateList></OperateList>
    <!-- 分页插件 -->
    <Pagination
      :total="100"
      :pageSize="[5, 10, 15]"
      :currentPageNum="1"
      :currentPageSize="5"
    ></Pagination>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from "vue";
import type { ElTable } from "element-plus";
import { Edit } from "@element-plus/icons-vue";
// 网络请求接口
import { getProductListApi } from "../../request/api";
// 组件
import SearchForm from "../../components/SearchForm.vue";
import addData from "../../components/addData.vue";
import OperateList from "../../components/OperateList.vue";
import Pagination from "../../components/Pagination.vue";

// 定义响应式数据
const state = reactive<{
  tableData: productInfoType;
}>({
  tableData: [],
});
let { tableData } = toRefs(state);

// 下拉框选项
const options1 = [{ label: "选项1", value: "1" }];

interface User {
  date: string;
  name: string;
  address: string;
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const multipleSelection = ref<User[]>([]);

// 列表数据

/*
 * 定义方法
 *
 */
// 请求列表数据
const getProductList = () => {
  getProductListApi({
    pageNum: "1",
    pageSize: "5",
  }).then(res => {
    if (res.code === 200) {
      // 存储数据到tableData中
      tableData.value = res.data.list;
      console.log(tableData.value);
    }
  });
};

// 点击多选框，添加值到数组中
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};

// 页面加载，请求列表数据
getProductList();
</script>
<style lang="less" scoped>
// 表格文字大小设置
:deep(.cell) {
  font-size: 13px !important;
}
</style>
